﻿<Flex Gap="FlexGap.Middle" Direction="FlexDirection.Vertical">
    <RadioGroup @bind-Value="direction">
        <Radio Value="FlexDirection.Horizontal">Horizontal</Radio>
        <Radio Value="FlexDirection.Vertical">Vertical</Radio>
    </RadioGroup>
    <Flex Direction="direction">
        @foreach (var i in Enumerable.Range(0, 4))
        {
            <div @key="i" style="@($"width:25%;height:54px; background-color: {(i % 2 == 1 ? "#1677ff" : "#1677ffbf")} ;")" />
        }
    </Flex>
</Flex>

@code {
    FlexDirection direction = FlexDirection.Horizontal;
}